﻿@import "../../LiberUI/Style/Default/Theme";
@import "../../LiberUI/Style/Default/_soIcons";

@font-face {
  font-family: 'SoIcons';
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot');
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot') format('embedded-opentype'), url('/LiberUI/Style/Default/fonts/iconfont.woff') format('woff'), url('/LiberUI/Style/Default/fonts/iconfont.ttf') format('truetype'), url('/LiberUI/Style/Default/fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.screen{
    height:100%;
}
.naviBar{
    height:40px;
}
.detail {
    padding:0.5rem 0 7rem 0;
}
.foot{
    position:fixed;
    bottom:0;
    height:5rem;
    background-color:$ClrThemeBk;
    &>div{
        height:5rem;
        line-height:5rem;
        text-align:center;
    }
}
#naviPrev{
    &.nomore{
        color:$ClrThemeTxt;
        & i{
            @include soicon($ClrThemeTxt);
        }
    }
    color:white;
    & i{
        @include soicon(white);
    }
}
#naviNext{
    &.nomore{
        color:$ClrThemeTxt;
        & i{
            @include soicon($ClrThemeTxt);
        }
    }
    color:white;
    & i{
        @include soicon(white);
    }
}


#orderHead{
    background-color:$ClrMsg;
    border:1px solid $ClrTheme;
    padding:0.3em;
    margin-bottom:1em;
    text-align:left;
}
#oh-id{

}
#oh-status{
    &.Draft{
        color:gray;
        &>i{
            @include soicon($ClrThemeTxt,1.5rem);
            @extend .icon-help;
        }
    }
    &.Active{
        color:$ClrTheme;
        &>i{
            @include soicon($ClrTheme,1.5rem);
            @extend .icon-update;
        }
    }
    &.Completed{
        color:$ClrOk;
        &>i{
            @include soicon($ClrOk,1.5rem);
            @extend .icon-done;
        }
    }
    &.Pending{
        color:$ClrImportant;
        &>i{
            @include soicon($ClrImportant,1.5rem);
            @extend .icon-help;
        }
    }
}

#orderStatusEx{
    border-top:1px solid darken($ClrMsg,30);
    &>div{
        margin-top:5px;
        &>div{
        }
    }
}

#tradeAction{
    &>.todoItem{
        @include block();
        display:none;
        &>.todoTip{
        }
        &.ConfirmOrder{
            height:4rem;
            line-height:4rem;
            text-align:center;
            &.Active{             
                &>.todoTip{
                    border:1px solid $ClrImportant;
                }
            }
            &.Completed{
                &>.todoStatus{
                    text-align:center;
                    background-color:$ClrDisable;
                    &>i{
                        @include soicon($ClrOk,2rem);
                    }
                }
            }
            &>.button{
                height:4rem;
                line-height:4rem;
                font-size:1.6rem;
                &>i{
                    @include soicon(white,2rem);
                }
            }

        }
    }

}

.InfoSection{
    margin-top:1em;
    border:1px solid white;
    &>.InfoSectionTitle{
        width:100%;
        font-size:1.6rem;
        font-weight:bold;
        height:3rem;
        line-height:3rem;
        cursor:pointer;
        &:hover{
            background-color:$ClrDisable;
        }
        &>i{
            float:right;
            margin-top:0.85rem;
            @include soicon($ClrThemeTxt,3rem);
            @extend .icon-unfoldmore;
        }
    }
    &>.InfoSectionBody{
        padding:0.3rem;
        display:none;
        overflow:hidden;
    }

    &.expand{
        &>.InfoSectionTitle{
            &>i{
                @extend .icon-unfoldless;
            }
        }
        &>.InfoSectionBody{
            height:auto;
            display:block;
        }
    }
}

#tradeTrace{
    
}
#tradeInfo{
    &>.ti-body{
        &>div{
            margin-top:1rem;
            @include block();
        }
    }
}

#orderItems{
}

.order-item-tpl{
    padding:0.5rem;
    @include block();
    margin-bottom:1rem;
    &>span{
        font-size:1.2rem;
    }
    &>.oi-mx-countinfo{
        font-size:1.2rem;
        color:$ClrTheme;
        text-align:left;
        &>.oi-mx-amount{
            float:right;
            color:$ClrThemeTxt;
        }
    }
}